<template>
  <div class="box">
    <h2>金融服务</h2>
    <div class="box-l">
      <p v-for="(v,i) in list" :key="i" :class="actiove == i ?'Active':''" @click="fn(i)">{{v.tit}}</p>
    </div>
    <component :is="com"></component>
  </div>
</template>
<script>
import Servea from "com/mes/jinrong/servea.vue";
import Serveb from "com/mes/jinrong/serveb.vue";
import Servec from "com/mes/jinrong/servec.vue";
export default {
  data() {
    return {
      com: Servea,
      actiove: 0,
      list: [
        { tit: "全部" },
        { tit: "业主服务" ,},
        { tit: "买卖服务" ,},
      ],
       arr:[
                {name:"放款提前还",con:"安心用"},
                {name:"尾款提前收",con:"安心收"},
                {name:"轻松解抵押",con:"安心赎"},
                {name:"保障资金安全",con:"贝壳宝贝"},
                {name:"精英保障计划",con:"房贷更安全"},
            ]
    };
  },
  methods: {
    fn(i) {
      if (i == 0) {
        this.com = Servea;
      }
      if (i == 1) {
        this.com = Serveb;
      }
      if (i == 2) {
        this.com = Servec;
      }
      this.actiove = i;
    },
  },
};
</script>
<style scoped>
.box {
  padding: 0 20px;
  margin: 20px 0;
}
h2 {
  font-weight: 600;
  margin-bottom: 20px;
}
.box-l {
  display: flex;
  margin-bottom: 20px;
}
p {
  width: 80px;
  height: 28px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 28px;
  font-size: 12px;
  color: #0c0c0c;
  font-weight: 500;
  border-radius: 20px;
  margin-right: 12px;
}
.Active {
  color: #fff;
  background: #3475f6;
}
</style>